<template>
    <div id="app">
        <div class="wrap">
            <div class="layouts-_nav_header">
                <nav role="navigation" class="navbar navbar-default">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" data-toggle="collapse" data-target=".navbar-collapse-example" class="navbar-toggle"><span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
                            <router-link tag="a" class="navbar-brand" to="/" :active-class="'active'">首页</router-link>
                        </div>
                        <div class="collapse navbar-collapse navbar-collapse-example">
                            <ul class="nav navbar-nav"></ul>
                            <ul class="nav navbar-nav navbar-right">
                                <router-link tag="li" to="/site/About" :active-class="'active'">
                                    <a>关于本站</a>
                                </router-link>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="container">
                <router-view/>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                ©copyright <a href="http://wodrow.gitee.io">wodrow.gitee.io</a>
            </div>
        </footer>
    </div>
</template>

<style>
    html, body, #app {height: 100%;}
    .wrap {min-height: 100%; height: auto; margin: 0 auto -60px; padding: 0 0 80px;}
    .footer {height: 60px; background-color: #f5f5f5; border-top: 1px solid #ddd; padding-top: 20px;}
    .container {}

    .layouts-_nav_header .navbar-nav li .label {
        position: absolute;
        top: 9px;
        right: 7px;
        text-align: center;
        font-size: 9px;
        padding: 2px 3px;
        line-height: .9;
    }
</style>